<template>
	<w-layout showNavbar navTitle="推广代理" navImmersive :navTitleColor="publicStyles['--color-t1']" background="url('/static/image/bk.png') no-repeat"
		navBackgroundColor="transparent" :scrollTop="page.scrollTop" :navScrollColor="publicStyles['--color-bk']">
		<template #default>
			<view class="container">
				<image class="w-100 h-100" :src="state.share_url" mode=""></image>
				<view class="w-100 px-80" style="position: fixed;bottom: 40rpx;left: 0;">
					<view @click="saveImage" class="public-btn-3 transition px-30 py-25 t-c">
						<view class="text-color-b fs-32">
							保存至相册
						</view>
					</view>
				</view>
			</view>
		</template>
	</w-layout>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		computed,
		nextTick
	} from 'vue'
	import {
		storeToRefs
	} from 'pinia'
	import {
		onLoad, onPageScroll
	} from '@dcloudio/uni-app'
	import {
		useAppStore
	} from '@/store/app'
	import {
		useColorStore
	} from '@/store/color'
	import {
		share_app
	} from '@/utils/request/api';
	import {
		useUserStore
	} from '@/store/user'
	const userStore = useUserStore()
	const appStore = useAppStore()
	const colorStore = useColorStore()
	const {
		publicStyles
	} = storeToRefs(colorStore)
	onLoad(async(options) => {
		get_share_app()
	})
	onMounted(() => {
		appStore.loadingHandler(false)
	})
	onPageScroll((e)=>{
		page.scrollTop = e.scrollTop
	})
	const page = reactive({
		scrollTop:0
	})
	
	
	const state = reactive({
		share_url: ''
	})
	
	async function get_share_app(){
		const res = await share_app({})
		state.share_url = res.share_url
	}
	
	async function saveImage(){
		// #ifdef H5
		window.open(state.share_url)
		// #endif
		
		// #ifndef H5
		uni.showLoading({
			title: '正在保存',
			mask: true
		})
		uni.getImageInfo({
			src: state.share_url,
			success: ({
				width,
				height,
				path,
				orientation,
				type
			}) => {
				console.log(width,
				height,
				path,
				orientation,
				type);
				uni.saveImageToPhotosAlbum({
					filePath: path,
					success: result => {
						uni.showToast({
							title: '保存成功',
							icon: 'success'
						})
					},
					fail: error => {
						console.log('err')
					},
					complete: res => {
						uni.hideLoading()
					}
				})
			},
			fail: error => {
				uni.hideLoading()
			}
		})
		// #endif
	}
</script>

<style lang="scss">
	.shadow {
		box-shadow: 2rpx 2rpx 12rpx var(--shadow);
	}
	.color{
		color: var(--color);
	}

	.container {
		width: 100%;
		height: 100vh;
		position: relative;
		box-sizing: border-box;
	}
	
	.login-btn {
		color: white !important;
		background: var(--color) !important;
		border-radius: 12rpx !important;
	}
</style>